<template>
  <div class="ghhn-info">
    <div class="ghhn-info-title">详情</div>
    <section v-loading="loading" class="ghhn-info-main">
      <el-form ref="form" label-width="100px" class="form">
        <el-col :span="12">
          <el-form-item label="头像：">
            <el-image :key="time" class="headerImg" :src="view+info.userView">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline" />
              </div>
            </el-image>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="姓名：">
            {{ info.userName|| '' }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别：">
            {{ info.sex=='MAN'? '男':'女' }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号码：">
            {{ info.phoneNum|| '' }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所在部门：">
            {{ info.depName||'' }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="婚姻状况：">
            {{ info.maritalStatusValue||'' }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="子女情况：">
            {{ info.childrenSituation||'' }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="籍贯：">
            {{ info.nativePlace||'' }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身高：">
            {{ info.height||'' }}cm
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="体重：">
            {{ info.weight||'' }}kg
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="信仰：">
            {{ info.faith||'' }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="月收入：">
            {{ info.monthlyIncomeValue||'' }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="爱好：">
            {{ info.hobby||'' }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="自我介绍：">
            {{ info.selfIntroduce||'' }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="个人照片：">
            <el-image
              v-for="(item,i) in srcList"
              :key="i"
              class="uimg"
              :src="item"
              :preview-src-list="srcList"
            >
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline" />
              </div>
            </el-image>
          </el-form-item>
        </el-col>
        <el-col v-show="t==0" :span="24">
          <el-form-item label="审核状态">
            <el-radio-group v-model="info.authStatus">
              <el-radio v-for="(item, index) in option" :key="index" :label="item.id">{{ item.name }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col v-show="t==0" :span="24">
          <el-form-item label="审核说明">
            <el-input v-model="temp.authReason" :autosize="{ minRows: 4, maxRows: 6}" type="textarea" placeholder="请输入审核说明" />
          </el-form-item>
        </el-col>
      </el-form>
    </section>
    <section class="ghhn-info-footer">
      <el-button style="padding: 10px 30px;" @click="back">返回</el-button>
      <el-button v-if="t==0" type="primary" @click="onSubmint('form')">提交</el-button>
      <el-button v-if="t == '0'" style="padding: 10px 30px;" type="primary" @click="onSubmint('next')">提交并审核下一条</el-button>
    </section>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import {
  check,
  get,
  queryPage
} from '@/views/staffserve/ghhn/api/detail'
import { specialText } from '@/utils/validate'
import elDragDialog from '@/directive/el-drag-dialog'
import CryptoJS from '@/utils/aesJiaJM'
export default {
  name: 'Ghhninfo',
  components: { draggable },
  directives: { elDragDialog },
  data() {
    return {
      view: '/API-DOCUMENT/document/file/download?id=',
      loading: false,
      info: {
      },
      srcList: [],
      temp: {
        id: '',
        authStatus: '',
        authReason: ''
      },
      option: [
        {
          name: '待审核',
          id: '0'
        },
        {
          name: '通过',
          id: '1'
        },
        {
          name: '驳回',
          id: '2'
        }
      ],
      t: '',
      hi: '',
      time: ''
    }
  },
  created() {
    if (!this.$route.query.i) {
      this.$message({
        showClose: true,
        message: '参数异常！',
        type: 'warning',
        onClose: () => {
          this.$router.back()
        }
      })
      return
    }

    this.t = this.$route.query.t
    this.hi = this.$route.query.hi
    this.getInfo(this.$route.query.i)
  },
  methods: {
    getNext() {
      const _this = this
      this.loading = true
      var query = {
        page: 1,
        pageSize: 1,
        type: 4,
        dataId: this.hi,
        authStatus: this.t
      }
      return new Promise((resolve, reject) => {
        queryPage(query, this.t).then(res => {
          _this.loading = false
          if (res.data.code == '200') {
            const list = res.data.data.rows || []
            if (list.length == 0) {
              this.$message.success('已全部审核完成')
              this.back()
              return
            } else {
              _this.getInfo(list[0].id)
            }
          }
        }).catch(error => {
          _this.loading = false
          reject(error)
        })
      })
    },
    back() {
      this.$router.push({ path: this.$filterPath('detail'), query: { i: this.$route.query.hi, t: this.$route.query.t }})
    },
    onSubmint(t) {
      if (this.info.authStatus == '2' && this.temp.authReason == '') {
        this.$message.error('请输入审核说明')
        return
      }
      this.temp.authStatus = this.info.authStatus
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      const params = Object.assign({}, this.temp)
      return new Promise((resolve, reject) => {
        check(params).then(() => {
          this.dialogVisible = false
          loading.close()
          this.$message({
            title: '成功',
            message: '审核成功',
            type: 'success',
            duration: 2000
          })
          if (t == 'next') {
            this.getNext()
          } else {
            this.back()
          }
        }).catch(error => {
          reject(error)
          loading.close()
        })
      })
    },
    /**
  * 根编辑回显
  */
    getInfo(id) {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      this.srcList = []
      this.info = {}
      this.temp = {
        id: '',
        authStatus: '',
        authReason: ''
      }
      this.temp.id = id
      return new Promise((resolve, reject) => {
        get({ id: id }).then(res => {
          loading.close()
          this.info = res.data.data
          if (this.info.phoneNum) {
            this.info.phoneNum = CryptoJS.$aesJieM(this.info.phoneNum)
          }
          const arr = res.data.data.personalPhoto.split(',')
          arr.forEach(item => {
            this.srcList.push(this.view + item)
          })
          if (this.info.authReason) {
            this.temp.authReason = this.info.authReason
          }
          this.time = new Date()
          resolve()
        }).catch(error => {
          loading.close()
          reject(error)
        })
      })
    }
  }
}

</script>

<style rel="stylesheet/scss" lang="scss">
@import '@/styles/mixin.scss';

.ghhn-info {
  background-color: #fff;
  min-height: calc(100vh - 60px);
  max-height: calc(100vh - 60px);
  overflow: hidden;
  .headerImg {
    width: 80px;
    height: 80px;
    border-radius: 50%;
  }
  .uimg {
    width: 117px;
    height: 117px;
  }
  .ghhn-info-title {
    position: relative;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    background-color: #ffffff;
    border-bottom: 1px solid #e5e5e5;
    font-family: PingFangSC-Medium;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    font-size: 14px;
    &:before {
      content: '';
      position: absolute;
      width: 2px;
      @include bg-color($mainColor);
      top: 13px;
      bottom: 13px;
      left: 15px;
    }
  }

  .ghhn-info-main {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 52px;
    box-sizing: border-box;
    padding: 0 10px;
    overflow: hidden;
    &::-webkit-scrollbar {
      width: 8px; /*对垂直流动条有效*/
      height: 1px; /*对水平流动条有效*/
    }
    /** 滚动条轨道*/
    &::-webkit-scrollbar-track {
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
      background-color: white;
      border-radius: 3px;
    }
    /** 滚动条里面小方块*/
    &::-webkit-scrollbar-thumb {
      height: 32px;
      border-radius: 5px;
      box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
      background-color: #eaeaea;
    }
    &:hover {
      overflow: auto;
    }
    .form {
      width: 1000px !important;
      margin: 0 auto;
      .el-select {
        width: 100%;
      }

      .line {
        text-align: center;
      }
    }
    .select-data {
      display: inline-block;
      background: rgba(246, 246, 246, 1);
      border-radius: 4px;
      font-size: 14px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      padding: 0 10px;
      margin-right: 5px;
      margin-bottom: 8px;
      i {
        cursor: pointer;
        padding-left: 5px;
      }
    }
    .selectbtn {
      display: inline-block;
      width: 120px;
      background: rgba(255, 255, 255, 1);
      @include border-color(1px, dotted, $mainColor);
      border-radius: 4px;
      font-size: 14px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      @include font-color($mainColor);
      text-align: center;
      cursor: pointer;
      margin-bottom: 10px;
    }
    .news-image {
      .el-card__header {
        padding-top: 8px;
        padding-bottom: 8px;
      }
    }
    .images-item {
      position: relative;
      margin-bottom: 10px;
      .upload-img {
        width: 100%;
        height: 160px;
        display: block;
      }
      .el-input {
        display: block;
      }
      .custom-uploader {
        width: 100%;
        display: block;
        .icon-wrap {
          width: 100%;
          height: 160px;
        }
      }
      .el-button {
        position: absolute;
        right: 10px;
        top: 0;
        color: #fff;
        i {
          background: rgba(0, 0, 0, 0.4);
          border-radius: 50%;
          padding: 2px;
        }
        &.image-index-move {
          right: 40px;
        }
      }
    }
    .images-add {
      color: $mainColor;
      font-size: 14px;
      padding-left: 80px;
      cursor: pointer;
      margin-bottom: 20px;
    }
    .upload-img {
      width: 100%;
      height: 160px;
    }
    .attachment-item {
      margin-bottom: 10px;
      .item-btn {
        font-size: 20px;
        cursor: pointer;
      }
      .video-item {
        position: relative;
        cursor: pointer;
        .el-button {
          position: absolute;
          right: 10px;
          top: 0;
          color: #fff;
          i {
            background: rgba(0, 0, 0, 0.4);
            border-radius: 50%;
            padding: 2px;
          }
          &.video-index-move {
            right: 40px;
          }
        }
      }
    }
  }

  .ghhn-info-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    padding: 10px 0;
    background-color: white;
    box-shadow: 0 -3px 6px #f5f5f5;
  }
  .image-upload-dialog {
    .icon-wrap {
      width: 300px;
      height: 160px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(247, 247, 248, 1);
      border: 1px solid rgba(226, 227, 232, 1);
      border-radius: 4px;
      .avatar-uploader-icon {
        font-size: 48px;
        color: #dadada;
        width: 300px;
        text-align: center;
      }
    }
    .upload-img {
      display: block;
      width: 300px;
      height: 160px;
      border-radius: 4px;
    }
  }
}
</style>
<style lang="scss">
@import '@/styles/mixin.scss';

.ghhn-info {
  .classify-tree-con {
    position: relative;
    height: 400px;
    overflow: hidden;
    .classify-tree-con-scrollbar {
      overflow: hidden;
      .el-scrollbar__wrap {
        max-height: 381px;
      }
    }
    .custom-tree-node {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      width: 100%;
      .tree-node-txt {
        flex: 1;
      }
    }
  }
  .el-tag--medium {
    line-height: 32px;
    height: 32px;
    & + .el-tag--medium {
      margin-left: 10px;
    }
  }
}
</style>
